<template>
  <div class="pendingInquiry">
    <a-form layout="inline" :form="form" @submit="handleSubmit">
      <div :class="!showAll?'ipt-box boxHeight':'ipt-box'">
        <a-form-item>
          <a-input v-decorator="['id']" placeholder="商品编号" />
        </a-form-item>
        <a-form-item>
          <a-input v-decorator="['inquiryId']" placeholder="询价单号" />
        </a-form-item>
        <a-form-item>
          <a-input v-decorator="['name']" placeholder="询价标题" />
        </a-form-item>
        <a-form-item>
          <a-input v-decorator="['memberName']" placeholder="询价人" />
        </a-form-item>
        <a-form-item>
          <a-input v-decorator="['goodsName']" placeholder="询价商品名称" />
        </a-form-item>
        <a-form-item>
          <a-input v-decorator="['brand']" placeholder="品牌" />
        </a-form-item>
        <a-form-item>
          <a-input v-decorator="['model']" placeholder="型号" />
        </a-form-item>
        <a-form-item>
          <a-range-picker
            v-decorator="['date']"
            :ranges="{ '当天': [moment(), moment()], '当前月': [moment(), moment().endOf('month')] }"
            :placeholder="pickerPlaceholder"
          />
        </a-form-item>
        <a-form-item>
          <a-select v-decorator="['gender']" placeholder="分类" style="width: 174px">
            <a-select-option value="all">全部</a-select-option>
            <a-select-option value="female">手工具</a-select-option>
          </a-select>
        </a-form-item>
      </div>
      <div class="float-right">
        <a-button type="primary" id="search" html-type="submit">查询</a-button>
        <a-button id="reset" @click="handleReset">重置</a-button>
        <div class="expand" @click="showAll = !showAll">
          {{expandWord()}}
          <a-icon v-if="!showAll" type="down" />
          <a-icon v-else type="up" />
        </div>
      </div>
    </a-form>
    <a-button type="primary" id="create" @click="create">新建</a-button>
    <a-button type="primary" id="submit">提交</a-button>
    <a-button id="modify">修改</a-button>
    <a-button id="delete">批量操作</a-button>
    <div class="table-nav">
      已选择
      <span>{{selectedRowKeys.length}}</span>项
      <a @click="start">清空</a>
    </div>
    <a-table
      :rowSelection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange,fixed:true}"
      :pagination="{
        showQuickJumper:true,
        pageSize:20,
        showSizeChanger:true,
        pageSizeOptions:['10', '20', '30', '40']
        }"
      :columns="columns"
      :dataSource="data"
      :scroll="{ x: 1500,y:500}"
    >
      <template slot="id" slot-scope="text, record, index">
        <a @click="jump(text)">{{text}}</a>
      </template>
    </a-table>
  </div>
</template>
<script>
import moment from "moment";
const columns = [
  {
    title: "询价单号",
    width: 100,
    dataIndex: "id",
    key: "id",
    scopedSlots: { customRender: "id" }
  },
  { title: "询价单标题", width: 200, dataIndex: "title", key: "title" },
  { title: "询价截止日期", dataIndex: "endDate", key: "endDate", width: 200 },
  {
    title: "报价有效期",
    dataIndex: "validityPeriod",
    key: "validityPeriod",
    width: 200
  },
  {
    title: "需求部门",
    dataIndex: "demandDepartment",
    key: "demandDepartment",
    width: 200
  },
  {
    title: "部门全称",
    dataIndex: "departmentFullName",
    key: "departmentFullName",
    width: 150
  },
  { title: "联系人", dataIndex: "contact", key: "contact", width: 150 },
  {
    title: "联系电话",
    dataIndex: "phoneNumber",
    key: "phoneNumber",
    width: 150
  },
  { title: "QQ", dataIndex: "qq", key: "qq", width: 150 },
  {
    title: "整单报价",
    dataIndex: "wholeQuotation",
    key: "wholeQuotation",
    width: 100
  },
  {
    title: "多次询价",
    dataIndex: "multipleInquiry",
    key: "multipleInquiry",
    width: 100
  }
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    id: `0000${i}`,
    title: `铁锤`,
    endDate: "2020-07-09 00:00:00",
    validityPeriod: "2020-09-09 00:00:00",
    demandDepartment: "采购部",
    departmentFullName: "广通采购部",
    contact: "Kay",
    phoneNumber: "15738841556",
    qq: "12103881",
    wholeQuotation: "是",
    multipleInquiry: "否"
  });
}

export default {
  data() {
    return {
      data,
      columns,
      selectedRowKeys: [],
      form: this.$form.createForm(this),
      dateFormat: "YYYY/MM/DD",
      monthFormat: "YYYY/MM",
      pickerPlaceholder: ["开始日期", "结束日期"],
      showAll: false
    };
  },
  methods: {
    moment,
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    create() {
      this.$router.push("../Inquiry/inquiryCreate");
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
        }
      });
    },
    expandWord() {
      if (this.showAll == false) {
        return "展开";
      } else {
        return "收起";
      }
    },
    handleReset() {
      this.form.resetFields();
    },
    start() {
      this.selectedRowKeys = [];
    },
    jump(id) {
      this.$router.push("../Inquiry/inquiryDetail/" + id);
    },
    total(total, range) {
      console.log(total);
      console.log(range);
      return `总共${range}页`;
    }
  }
};
</script>
<style scope>
.pendingInquiry {
  padding: 24px 32px;
  background-color: white;
}
.boxHeight {
  height: 42px;
  overflow: hidden;
}
.ant-form {
  position: relative;
}
.ipt-box {
  margin-bottom: 16px;
  margin-right: 200px !important;
}
.ant-btn {
  margin: auto 10px 10px auto;
}
.float-right {
  width: 200px;
  position: absolute;
  right: 0px;
  top: 4px;
}
.expand {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  color: #1890ff;
}
.table-nav {
  background-color: #e6f7ff;
  border: 1px solid #bae7ff;
  padding: 5px 30px;
  border-radius: 3px;
  margin-bottom: 10px;
}
.table-nav span {
  margin: auto 3px;
}
.table-nav span,
.table-nav a {
  color: #2595fd;
}
.table-nav a {
  margin-left: 15px;
}
.ant-form-inline .ant-form-item {
  margin-right: 24px !important;
}
</style>
